<template>
	<view class="wrapper" @click="toDetail" :style="{borderRadius: borderRadius + 'rpx', padding: padding, borderBottom: borderBottom ? '1rpx solid #eee' : 0}" >
		<view class="w-left">
			<fu-image :src="info.thumb" mode="aspectFill" lazy-load class="goods-img" width="180rpx" height="180rpx" radius="8rpx"></fu-image>
		</view>
		<view class="w-right flex flex-direction justify-between">
			<view>
				<view class="name text-cut-2">{{info.name }}</view>
				<view class="flex align-center margin-top-20">
					<view class="flex align-center margin-right-24">
						<image src="https://localelife.chunchuangkeji.cn/h5img/images/007.png" class="fu-block-22 margin-right-6"></image>
						<text class="text-666 font-20" v-if="info.is_appointment">需要预约</text>
						<text class="text-666 font-20" v-else>无需预约</text>
					</view>
					<view class="flex align-center" v-if="info.is_point">
						<image src="https://localelife.chunchuangkeji.cn/h5img/images/007.png" class="fu-block-22 margin-right-6"></image>
						<text class="text-666 font-20">积分抵</text>
					</view>
				</view>
			</view>
			<view class="bottom flex justify-between">
				<view class="left flex">
					<text class="text-price">{{info.shop_price}}</text>
					<text class="text-through">¥{{info.market_price}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		info: {
			type: Object,
			default() {
				return {}
			}
		},
		showBtn: {
			type: Boolean,
			default: false
		},
		borderRadius: {
			type: [String, Number],
			default: 0
		},
		padding: {
			type: String,
			default: '24rpx'
		},
		borderBottom: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			
		}
	},
	methods: {
		toDetail() {
			this.$emit('onClick')
			this.$urouter.navigateTo({
			  url: '/pages/goods/goodsdetail/goods-detail/index',
			  params: {
			    sku_id: this.info.sku_id || 0,
			    goods_id: this.info.id
			  }
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.wrapper {
	padding: 24rpx;
	display: flex;
	background-color: #fff;
	// border-radius: 16rpx;
	// margin-bottom: 24rpx;
	.w-left {
		flex-shrink: 0;
		.goods-img {
			width: 180rpx;
			height: 180rpx;
			border-radius: 8rpx !important;
		}
	}
	.w-right {
		margin-left: 24rpx;
		flex: 1;
		overflow: hidden;
		.name {
			font-size: 28rpx;
			font-weight: bold;
			// display: -webkit-box;
			// -webkit-box-orient: vertical;
			// overflow: hidden;
			// word-break: break-all;
			// -webkit-line-clamp: 2;
		}
		.address {
			margin-top: 16rpx;
			.left {
				flex: 1;
				.icon {
					flex-shrink: 0;
					width: 24rpx;
					height: 24rpx;
					margin-right: 16rpx;
				}
				.addr {
					font-size: 22rpx;
					color: #999;
				}
			}
			.right {
				font-size: 20rpx;
				color: #999;
				flex-shrink: 0;
			}
		}
		.number {
			margin-top: 8rpx;
			.item {
				margin-right: 64rpx;
				font-size: 22rpx;
				color: #999;
				.icon {
					width: 24rpx;
					height: 24rpx;
					margin-right: 24rpx;
				}
			}
		}
		.bottom {
			align-items: flex-end;
			.left {
				align-items: baseline;
			}
			.text-price {
				color: #FF5C5C;
				font-size: 32rpx;
				font-weight: bold;
			}
			.text-through {
				font-size: 20rpx;
				color: #999;
				margin-left: 16rpx;
			}
			.right {
				.btn {
					width: 140rpx;
					height: 56rpx;
					border-radius: 28rpx;
					background-color: #FF6F27;
					text-align: center;
					line-height: 56rpx;
					font-size: 24rpx;
					color: #fff;
					box-sizing: border-box;
				}
				.share {
					background-color: rgba(255, 111, 39, 0.10);
					border: 1rpx solid #FF6F27;
					color: #FF6F27;
				}
			}
		}
	}
}
</style>
